<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Manager</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
    <script type="text/javascript" src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div>
    <div :class="$style.channelInput" @click="onOpen" :style="customStyles">
        <div v-if="loading" v-loading="loading" style="margin: 18px 0 0 0"></div>
        <span v-else>{{ checkedSize }}个选中项</span>
    </div>
    <el-dialog
            title="选择渠道"
            :visible="channelDialog"
            width="43%"
            @close="onClose"
            :modal="modal"
            :close-on-click-modal="false"
            :modal-append-to-body="modalAppendToBody"
            :append-to-body="appendToBody"
    >
        <div>
            <div :class="$style.channelFilter">
                <div style="width: 80%">
                    <input placeholder="输入关键字" v-model="filterText" clearable :class="$style.channelInput2"
                           @blur="filterTextBlur"/>
                </div>
                <div>
                    <el-upload
                            ref="upload"
                            class="upload-demo"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :limit="1"
                            :auto-upload="false"
                            :before-upload="onBeforeUpload"
                            :on-change="onChange"
                            :on-error="onError"
                            :show-file-list="true"
                            accept=".xlsx"
                    >
                        <div>
                            <el-button size="medium" :class="$style.channelUploadButton">点击上传</el-button>
                        </div>
                    </el-upload>
                </div>
            </div>
            <div :class="$style.channelTree">
                <el-tree
                        class="filter-tree"
                        :data="channelTreeData"
                        node-key="id"
                        v-loading="treeLoading"
                        :props="defaultProps"
                        show-checkbox
                        :filter-node-method="filterNode"
                        ref="tree"
                >
                </el-tree>
            </div>
        </div>
        <div slot="footer" :class="$style.blackDialogFooter">
            <el-button type="success" @click="refresh" plain size="medium">刷新</el-button>
            <el-button type="primary" @click="clearTree" plain size="medium">清空重置</el-button>
            <el-button type="success" @click="affirm()" plain size="medium">确认</el-button>
        </div>
    </el-dialog>
</div>
</body>
</html>